<template>
  <el-menu
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-menu-item
      v-for="(item, idx) in newMenuList"
      :key="idx"
      :index="item.path" 
      @click="toRouter(item)"
    >
      <span slot="title">{{ item.meta.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  // 接收由外界传来的参数
  props: {
    // 路由菜单
    list: {
      // 接收属性的类型
      type: [Array, Object, String, Number, Boolean],
      // 默认值
      default: () => [],
    },
    // 后端规定的权限字符串
    ruleList: {
      type: String,
      default: "",
    },
  },
  // 计算属性，通过监听依赖值 触发
  computed: {
    //   动态计算权限
    newMenuList() {
      let newMenu = [];

      // 将权限字符串转化为数组
      const newRuleList = this.ruleList.split(",");

      // 过滤路由菜单
      newMenu = this.list.filter(
        (item) => newRuleList.indexOf(item.meta.rule) !== -1
      );

      return newMenu;
    },
  },
  methods: {
    handleOpen() {},
    handleClose() {},
    toRouter(item) {
      this.$emit('abc', item)
        // this.$router.push(item.path)
    }
  },
};
</script>